<script setup lang="ts">
import { computed } from 'vue'
import CustLabel from '../../components/CustLabel.vue'

const props = defineProps<{
  todo: Todo
}>()

// 上边距
const hasBothTimeAndLocation = computed(() => {
  return props.todo.time && props.todo.location
})

// 下边距
const hasRemark = computed(() => {
  return props.todo.remark
})
</script>

<template>
  <view class="todo-item">
    <view class="top space-between" :class="{ 'has-both-margins': hasBothTimeAndLocation }">
      <!-- 时间 -->
      <view class="time flex-left" v-if="todo.time">
        <view class="icon">
          <image src="../../static/icons/time.png" />
        </view>
        <view class="content">
          {{ todo.time }}
        </view>
      </view>

      <!-- 地点 -->
      <view class="location flex-left" v-if="todo.location">
        <view class="icon">
          <image src="../../static/icons/location.png" />
        </view>
        <view class="content">
          {{ todo.location }}
        </view>
      </view>
    </view>

    <view class="middle space-between">
      <!-- 标题 -->
      <view class="title">{{ todo.title }}</view>

      <!-- 标签 -->
      <view class="labels flex-left" v-if="todo.labels.length">
        <CustLabel
          v-for="label in todo.labels"
          :key="label.name"
          :label="label"
          type="primary"
          :style="{ fontSize: '24rpx' }"
        />
      </view>
    </view>

    <view class="bottom space-between" :class="{ 'has-remark-margin': hasRemark }">
      <!-- 备注 -->
      <view class="remark flex-left" v-if="todo.remark">
        <view class="icon">
          <image src="../../static/icons/remark.png" />
        </view>
        <view class="content">
          {{ todo.remark }}
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.todo-item {
  border-radius: 20rpx;
  padding: 30rpx;
  background-color: $uni-white;
  box-shadow: $uni-shadow-sm;
  margin-bottom: 20rpx;

  .top.has-both-margins {
    margin-bottom: 20rpx;
  }

  .bottom.has-remark-margin {
    margin-top: 20rpx;
  }

  .time,
  .location,
  .remark {
    font-size: 28rpx;
    color: $uni-base-color;
  }

  .time,
  .location,
  .title,
  .labels {
    max-width: 300rpx;
    overflow: auto;
  }

  .remark {
    max-width: 600rpx;
    overflow: auto;
  }

  .title {
    font-weight: 500;
    font-size: 36rpx;
    color: $uni-main-color;
  }

  .space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .flex-left {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 12rpx;
    // max-width: 300rpx;
    // overflow: auto;

    .icon {
      width: 24rpx;
      height: 24rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
